<template>
  <div class="app-container bg-white">
    <div class="page-body">
        <div class="full-width" id="mul_select">
          <el-form :inline="true" size="small"> 
            <el-form-item> 
              <el-input v-model.trim="form.name" placeholder="请输入昵称" class="dqright" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-input placeholder="请输入手机号" v-model.trim="form.phone" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-cascader :options="options" placeholder="请选择地区" :show-all-levels="false" v-model="categoryId"
                :props="{ value: 'name',label:'name',children:'children' }" clearable>
              </el-cascader>
            </el-form-item>
            <el-form-item>
              <el-date-picker
                v-model="value1"
                style="width: 300px;"
                  @change="timeChange"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="primary" class="width_104" @click="queryVip">查询</el-button>
              <el-button size="small" class="width_104" @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div>
               <!-- v-if="roleBtns.includes('sys:goods:insert') || $store.getters.isAdmin" -->
          <el-button size="mini" type="success" icon="el-icon-document-add" @click="addorder">新增会员</el-button>
        </div>
          <el-table :data="tableData"  v-loading="loading" stripe class="margin_top_20" :header-cell-style="tableHeaderStyle">
            <!-- <el-table-column prop="id" label="用户名" width="300" align="center"> </el-table-column> -->
            <el-table-column prop="name" width="240" label="昵称"> </el-table-column>
            <el-table-column prop="phone" label="手机号"> </el-table-column>
            <el-table-column prop="createTime" label="注册时间"> </el-table-column>
            <el-table-column prop="place" label="所在地区"></el-table-column>
            <el-table-column label="操作" width="250">
              <template slot-scope="scope">
                <el-button size="mini" class="my-btn my-btn--mini my-btn--primary plain" @click="edit(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        <!-- </div> -->
      <!-- </div> -->
    </div>
   <el-pagination class="fy" :page-sizes="[10, 50, 100, 200]" background :page-size="form.pageSize" :current-page="form.pageNum"
            layout="total, sizes, prev, pager, next, jumper" :total="totalNum" @current-change="auditPaging" @size-change="auditSizeChange"> </el-pagination>
  </div>
</template>
<script>
import Setting from '@/settings';
import { getBanerList} from '@/api/member'
import {provinceMerchabt} from '@/api/merchants'
export default {
  data() {
    return {
      categoryId:[],
      value1:[],
      options:[],//地区数据
      tableData: [],
      categoryId:[],
      pagecount:0,
      totalNum:0,
      mchNameValue: null,
      storebrandsValue: '',
      form: {
        storebrandsId:null,
        id:null, //用户名
        name:null, //昵称
        phone:null,//手机号码
        cityName:null,//城市名
        provinceName:null,//省名
        districtName:null,//区名
        minTime:null,//最小注册时间
        maxTime:null,//最大注册时间
        pageNum:1,//分页页数
        pageSize:10,//分页规格
        place:null
      },
      createTime: '',//注册时间
      storebrands: [
        { id: '0', label: '用户名' },
        { id: '1', label: '昵称' },
      ],
      loading: false,
      tableHeaderStyle: Setting.tableHeaderStyle,
    }
  },
  created() {
    this.queryVip()
    this.provinceShow()//省
  },
   watch: {
      categoryId(val) {
        this.form.provinceName = val[0]
        this.form.cityName = val[1]
        this.form.districtName = val[2]
      }
  },
  methods: {

   async provinceShow() {//获取省的数据
      let res = await provinceMerchabt()
      this.options = res.data
    },
      timeChange(val) {//选择日期触发
      this.form.minTime = this.value1[0]+" 00:00:00"
      this.form.maxTime = this.value1[1]+" 23:59:59"
    },
    // 会员中心列表及查询
    async queryVip() {
      this.loading = true;
      const data = await getBanerList(this.form)
      if (data.code == 200) {
        setTimeout(() => {
            this.loading = false;
        }, 500);
        this.tableData =  data.data.list
       this.tableData.sort((a,b)=>{//排序
          let aTimeString = a.createTime;
          let bTimeString = b.createTime;
          aTimeString = aTimeString.replace(/-/g,'/');
          bTimeString = bTimeString.replace(/-/g,'/');
          let aTime = new Date(aTimeString).getTime();
          let bTime = new Date(bTimeString).getTime();
          return bTime - aTime
      });
         this.form.pageSize = data.data.pageSize
        this.totalNum = data.data.total
      
      }else{
        this.loading = false;
        this.$message.error('加载失败，请重新刷新列表');
        return;
      }
    },
    //重置
    resetForm() {
      this.form.name = '';
      this.form.phone = '';
      this.categoryId = '';
      this.value1 = '';
      this.form.minTime = ''
      this.form.maxTime = ''
      this.queryVip();
    },
    //  分页接口点击
  auditPaging(val) {
      this.form.pageNum = val
      this.queryVip()
   },
   auditSizeChange(val) {
     this.form.pageSize = val
     this.queryVip()
   },
    // 点击跳转子页面
    addorder(){
      this.$router.push({
        name: 'addorder',
      })
    },
    edit(item) {//跳转详情页面
       this.$router.push({
        name: 'getDetail',
        params:{val:item}
      })
    }
  }
}
</script>

<style scoped>
.all {
  height: auto;
  width: 97%;
  background-color: #fff;
  margin: 20px auto;
  margin-top: 50px;
  border-radius: 6px;
  padding: 15px;
  box-shadow: 0 0 4px 0 rgba(200, 200, 200, 0.5);
  padding-bottom: 40px;
}
.tagtitle {
  padding: 0 15px;
  padding-bottom: 23px;
  padding-top: 13px;
  color: #595961;
  font-weight: bold;
  font-size: 18px;
  float: left;
}
.tagtitles{
  float: right;
  padding: 0 15px;
  padding-bottom: 23px;
  padding-top: 13px;
  color: #169bd5;
  margin-right: 40px;
  font-size: 18px;
}
.tagtable {
  background-color: #f2f2f6;
  border-radius: 6px;
  height: 70%;
  /* padding: 15px; */
  width: 100%;
}
.tabletitle {
  border-radius: 10px;
  background-color: #fff;
  display: flex;
  padding: 15px;
  /* box-sizing: border-box; */
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 0px !important;
}
.fy {
  text-align: center;
  margin-top: 40px;
}
::v-deep .el-form--inline .el-form-item{
  margin-right: 15px!important;
}
.width_104 {
  width: 104px;
}
</style>
